<template>
	<view class="pageWrapper">
		<view class="pageInner">
			<image class="userAvatar" :src="avatar" mode=""></image>
			<view class="infoArea">
				<view class="infoLine">
					<view class="lineTitle">
						昵称
					</view>
					<view class="lineValue">
						<input class="innerValue" type="text" v-model="userInfo.name" />
					</view>
				</view>
				<view class="infoLine">
					<view class="lineTitle">
						手机号
					</view>
					<view class="lineValue">
						<view class="innerValue flex flex-align-center">
							{{userInfo.mobile}}
						</view>
						<view class="optBtn flex-all-center" @click="goEditPhone">
							更换手机号
						</view>
					</view>
				</view>
				<view class="infoLine">
					<view class="lineTitle">
						年级
					</view>
					<view class="lineValue" @click="openGrade">
						<view class="innerValue flex flex-align-center">
							{{ getShowType(gradeList,userInfo.gradeId) ? getShowType(gradeList,userInfo.gradeId) : '选择年级' }}
						</view>
					</view>
				</view>
				<view class="infoLine">
					<view class="lineTitle">
						地区
					</view>
					<view class="lineValue" @click="openAddress">
						<view class="innerValue flex flex-align-center">
							{{ (userInfo.province + userInfo.city) ? userInfo.province + userInfo.city : '选择地区' }}
						</view>
					</view>
				</view>
			</view>
			<view class="btnArea">
				<view class="btn cancelBtn flex-all-center" @click="goBack">
					放弃修改
				</view>
				<view class="btn confirmBtn flex-all-center" @click="upDataUserInfo">
					确认修改
				</view>
			</view>
		</view>
		
		<!-- 年级 -->
		<choose-grade ref="gradeChoose" :gradeList="gradeList"  @change='chooseGrade'></choose-grade>
		
		<!-- 省市选择器 -->
		<liu-choose-address ref="scroll" @change='chooseSuccess'></liu-choose-address>
		
		<!-- 弹窗 -->
		<!-- <u-popup :show="gradeDialog" @close="close" @open="open"  mode="bottom">
			<view class="">
				xxx
			</view>
		</u-popup> -->
		
		<!-- 弹窗 -->
		<u-popup :show="dialogStatus" @close="close" @open="open" mode="center">
			<view class="">
				您还未保存，是否保存修改？
			</view>
			<view class="btnArea">
				<view class="">
					放弃修改
				</view>
				<view class="">
					确认修改
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import chooseGrade from '../../components/choose-grade.vue'
	import api from '@/api/api.js'
	export default {
		components: {
			chooseGrade
		},
		data() {
			return {
				gradeDialog: false,
				dialogStatus: false,
				nickName: '用户昵称',
				grade: '',
				city: '',
				userInfo: {},
				avatar:'',
				gradeList:[],
				gradeId:0
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getGrade()
			this.avatar = uni.getStorageSync('avatarUrl')
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			getGrade(){
				var obj = {
					stage:'初中'
				}
				api.getGrade(obj).then(res=>{
					this.gradeList = res.data
				})
			},
			upDataUserInfo(){
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.updateUser(token,{
					name:this.userInfo.name,
					gradeId:this.gradeId,
					province:this.userInfo.province,
					city:this.userInfo.city
				}).then(res=>{
					uni.$u.toast('修改成功');
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			},
			getUserInfo(){
				var token = uni.getStorageSync('AUTH_TOKEN')
				api.userInfo(token).then(res=>{
					this.userInfo = res.data
				})
			},
			openGrade () {
				this.$refs.gradeChoose.open()
			},
			openAddress() {
				this.$refs.scroll.open()
			},
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.userInfo.province = e.value[0].label
				this.userInfo.city = e.value[1].label + e.value[2].label
			},
			chooseGrade (e) {
				console.log('所选择的年级信息:', e)
				this.grade = e.value.name
				this.gradeId = e.value.id
			},
			open() {
				// console.log('open');
			},
			close() {
				this.dialogStatus = false
			},
			goEditPhone () {
				uni.navigateTo({
					url: '/pages/mine/editphone?phone='+this.userInfo.mobile
				})
			},
			// 根据value获取name
			getShowType(arr, val) {
			  let obj = arr.find((item) => {
				return item.id == val;
			  });
			  if (obj) {
				return obj.name;
			  } else {
				return "";
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageWrapper {
		font-size: 30rpx;

		.pageInner {
			padding: 48rpx 40rpx 0 40rpx;

			.userAvatar {
				margin: 0 auto;
				display: block;
				width: 170rpx;
				height: 170rpx;
			}

			.infoArea {
				margin-top: 14rpx;

				.infoLine {
					display: flex;
					align-items: center;
					height: 114rpx;

					.lineTitle {
						text-align-last: justify;
						width: 90rpx;
						color: #282828;
						font-weight: bold;
						font-size: 30rpx;
					}

					.lineValue {
						margin-left: 30rpx;
						flex: 1;
						display: flex;
						align-items: center;
						height: 100%;

						.innerValue {
							flex: 1;
							height: 100%;
							border-bottom: 1rpx solid #CCC;
						}

						.optBtn {
							width: 178rpx;
							height: 64rpx;
							font-size: 24rpx;
							border-radius: 40rpx;
							color: #FFF;
							background-color: #03A2EC;
						}
					}
				}
			}

			.btnArea {
				margin-top: 120rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					width: 300rpx;
					height: 80rpx;
					color: #FFF;
					border-radius: 40rpx;
				}

				.cancelBtn {
					background: #999999;
				}

				.confirmBtn {
					background: #03A2EC;
				}
			}
		}

	}
</style>